在早期的 JavaScript 开发中， 命名空间污染 是一个重大障碍。当无关代码共享一组全局变量名时，会出现不可预测的冲突。现代设计已从无结构的态度转向 隔离的模块系统。
1. 功能隔离（立即执行函数表达式）
通过将代码包裹在 立即执行函数表达式 （IIFE）中，我们创建了一个私有作用域。像 names 这样的变量被限制在函数内部，无法被全局环境访问。
(function() {
var internal = "secret";
console.log(internal);
})();
var internal = "secret";
console.log(internal);
})();
2. 基于对象的接口
为了向外部世界提供功能，一个模块会返回一个对象，作为其 公共接口。这将相关的方法（如 name 和 number）归入一个重新声明的全局变量下。
3. 导出模式
一种更复杂的变体涉及将一个 exports 对象传入 IIFE。这使得模块可以将其 API 直接附加到特定的命名空间目标上，从而在模块使用方式上提供了灵活性。
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
What is 'Namespace Pollution' in the context of JavaScript?
Using too many comments in the source code.
Unrelated code having to share a single set of global variable names.
A failure in the garbage collection system.
The inability to use numbers as variable identifiers.
✅ Correct!
Namespace pollution makes code fragile because any script might overwrite global variables used by another.❌ Incorrect
It refers specifically to the overcrowding and conflict of names in the global scope.QUESTION 2
Why is an IIFE used to create a module?
To make the code run faster in the browser.
To bypass the 'use strict' requirement.
To create an isolated, private namespace via function scope.
To automatically export variables to the window object.
✅ Correct!
Functions are the primary way in JavaScript to create a new scope that hides internal logic from the outside.❌ Incorrect
IIFEs provide encapsulation, preventing internal variables from leaking into the global scope.QUESTION 3
In the 'weekDay' module example, what allows the returned functions to access the 'names' array?
The 'names' array is actually a global variable.
JavaScript Closures.
The 'this' keyword refers to the array.
The array is passed as an argument to each function.
✅ Correct!
Closures allow nested functions to remember and access the variables in their outer function's scope.❌ Incorrect
It is the mechanism of closures that keeps the local 'names' variable alive for the interface methods.QUESTION 4
What is the primary purpose of returning an object from a module function?
To save memory by grouping variables.
To provide a structured public interface for the module.
To convert the script into an asynchronous process.
To ensure the code is compatible with Internet Explorer.
✅ Correct!
The object acts as a gateway, exposing only the intended methods while keeping others hidden.❌ Incorrect
The object serves as the 'Interface' mentioned in the learning outcomes.QUESTION 5
What is passed as an argument in the Exports Pattern: `(function(exports) { ... })(this.weekDay = {});`?
The entire window object.
An empty string.
A reference to a new object assigned to weekDay.
A list of dependency names.
✅ Correct!
This pattern explicitly creates a target object and passes it in to be 'filled' with functionality.❌ Incorrect
It passes a specific object that will hold the module's public API.Case Study: Manual Module Construction
Building a Month Converter Module
You need to create a utility that handles month data without polluting the global namespace. The utility must convert zero-based month numbers (0-11) to strings and vice-versa. It should use plain JavaScript without external loaders.
Q
Write a simple module similar to the weekday module that can convert month numbers (zero-based) to names and convert names back to numbers. Give it its own namespace and use an internal array.
Solution:
var month = (function() { var names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; return { name: function(number) { return names[number]; }, number: function(name) { return names.indexOf(name); } }; })(); // Usage example: console.log(month.name(2)); // 'March' console.log(month.number("November")); // 10
var month = (function() { var names = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; return { name: function(number) { return names[number]; }, number: function(name) { return names.indexOf(name); } }; })(); // Usage example: console.log(month.name(2)); // 'March' console.log(month.number("November")); // 10
Q
How does this implementation protect the 'names' array from external modification?
Solution:
The 'names' array is declared with 'var' inside the IIFE function scope. Because it is not part of the returned object, it is not accessible from the global scope. Only the functions 'name' and 'number' have access to it through closure.
The 'names' array is declared with 'var' inside the IIFE function scope. Because it is not part of the returned object, it is not accessible from the global scope. Only the functions 'name' and 'number' have access to it through closure.